<#include "../base.ftl"/>

<#macro title>
    效果测试页
</#macro>

<#macro cssfile>
</#macro>

<#macro scriptfile>
</#macro>

<#macro breadcrumb>
    <ul class="breadcrumb">
     <li><a href="index.html">Home</a> <span class="divider">/</span></li>
     <li class="active">效果测试页</li>
    </ul>
</#macro>

<#macro main>
<!--测试弹出窗口-->
    <div id="dialog-message" title="Modal Dialog">
        <p>
            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
            Your files have downloaded successfully into the <a href="#">My Downloads</a> folder.
        </p>
        <p>
            Currently using <b>36% of your storage space</b>.
        </p>
    </div>
    
    <div id="dialog-detail" title="详情显示">
        <table>
            <tr>
                <td>字段1</td><td>字段内容1</td>
                <td>字段2</td><td>字段内容2</td>
            </tr>
            <tr>
                <td colspan="4">字段3</td>
            </tr>
            <tr>
                <td colspan="4"><p>
                        字段3字段3字段3字段3字段3字段3字段3字段3字段3
                        字段3字段3字段3字段3字段3字段3字段3字段3
                        字段3字段3字段3字段3字段3字段3字段3字段3字段3
                        字段3字段3字段3字段3字段3字段3字段3字段3字段3
        </p></td>
            </tr>
        </table>
    </div>
    
    <a href="javascript:void(0)" id="modal_link" class="ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-newwin"></span>
            Open Modal Dialog
    </a>
    &nbsp;
    <a href="javascript:void(0)" id="modal_detail" class="ui-state-default ui-corner-all">
            showDetail
    </a>
    
</#macro>

<#macro jsscript>

$('#modal_link').click(function () {
        $('#dialog-message').dialog('open');
        return false;
    });

$("#dialog-message").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        }
        }
});

$("#dialog-detail").dialog({
    autoOpen: false,
    modal: true,
    height: 300,
    width : 600,
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        }
        }
});
    
$('#modal_detail').click(showDetail)    ;
    
 var testData = {
        column : 2,
        data:[
            {label:"栏位1",
             val : "数据1"
            },
            {label:"栏位2",
             val : "数据2"},
             {label:"栏位5",
             val : "数据5"
            },
            {label:"栏位3",
             val : "字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3字段3",
             type : "textarea"},
            {label:"栏位4",
             val : "数据4",
             type : "text"}]
        };
    
function showDetail(){
    //动态创建一个dialog，并显示内容
    //先显示静态的dialog
    var buffer = "<table>";
    var column = testData.column;
    var columnIndex = 1;

    $.each(testData.data, function(i, item){
        if(item.type != undefined && item.type == "textarea"){
            if(columnIndex < column){
                //补充格式
                for(var i=columnIndex;i<=column;i++){
                    buffer = buffer + "<td></td><td></td>";
                }
                
                buffer = buffer + "</tr>";
            }
            
            //添加数据
            buffer = buffer + "<tr>";
            buffer = buffer + "<td colspan=\"" + column*2 + "\">" + item.label + "</td>";
            buffer = buffer + "</tr>";
            
            buffer = buffer + "<tr>";
            buffer = buffer + "<td colspan=\"" + column*2 + "\">" + item.val + "</td>";
            buffer = buffer + "</tr>";
            
            columnIndex = 1;
        }else{
            if(columnIndex == 1){
                buffer = buffer + "<tr>";
            }
            
            buffer = buffer + "<td>" + item.label + "</td>";
            buffer = buffer + "<td>" + item.val + "</td>";
            
            if(columnIndex == column){
               buffer = buffer + "</tr>"; 
            }
            
            columnIndex++;
        }
    }); 
    
    if(columnIndex < column){
        //补充格式
        for(var i=columnIndex;i<=column;i++){
            buffer = buffer + "<td></td><td></td>";
        }
        
        buffer = buffer + "</tr>";
    }
    
    buffer = buffer + "</table>";
    
    //alert(buffer);
    
    $('#dialog-detail').html(buffer);
    $('#dialog-detail').dialog('open');
    return false;
}

</#macro>   
    